<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8" />
  <meta name="author-name" content="Mironcoder | Miron Mahmud" />
  <meta name="author-email" content="mironcoder@gmail.com" />
  <meta name="author-profile" content="https://themeforest.net/user/mironcoder" />
  <meta name="template-name" content="Vegana" />
  <meta name="template-created" content="09-November-2020" />
  <meta name="template-title" content="Vegana - vegan food eCommerce store html template" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <meta name="keywords" content="vegana, vegan, food, eCommerce, store, html, template, bootstrap, vegetarian, organic, vegetables, greengrocery, fruit, healthy, shop" />
  <title>购物车</title>
  <link rel="icon" href="../assets/images/logo/favicon.png" />
  <link rel="stylesheet" href="../assets/source/css/vendor/flaticon.css" />
  <link rel="stylesheet" href="../assets/source/css/vendor/fontawesome.css" />
  <link rel="stylesheet" href="../assets/source/css/vendor/bootstrap.min.css" />
  <link rel="stylesheet" href="../assets/source/css/custom/main.css" />
  <link rel="stylesheet" href="../assets/source/css/custom/cartlist.css" />

  <style>
    #none{
      list-style-type:none;
    }
  </style>
 </head>
 <body>
  <div id="app">
  <header class="header-part">
   <div class="container">
    <div class="row">
     <div class="col-sm-12 col-md-6 col-lg-6">
      <ul class="header-info">
        <li> <i class="fas fa-envelope"></i><p>{{adminEmail}}</p></li>
        <li> <i class="fas fa-phone-alt"></i><p>+{{adminTel}}</p></li>
      </ul>
     </div>
     <div class="col-sm-12 col-md-6 col-lg-6">
      <div class="login_info" v-if="userInfo == ''">
				<a href="login.html" target="_blank" title="点击登录">您好，请先登录</a>
				<a href="reg.html" target="_blank" title="点击注册">免费注册</a>
			</div>
			<div class="login_info" v-else>
				<span>尊敬的用户{{userInfo.uname}},您好</span>
				<a href="login.html" title="点击退出">退出登录</a>
			</div>
     </div>
    </div>
   </div> 
  </header> 
  <!-- 下拉菜单 -->
  <nav class="navbar-part">
    <div class="container">
     <div class="row">
      <div class="col-lg-12">
       <div class="navbar-element">
        <ul class="left-widget">
         <li><a class="icon icon-inline menu-bar" href="#"><i class="fas fa-align-left"></i></a></li>
        </ul> 
        <a class="navbar-logo" href="#"> <img src="../assets/images/logo/01.png" alt="logo" /> </a>
        
        <ul class="right-widget">
          <li><a class="icon icon-inline" href="login.html"><i class="fas fa-user"></i></a></li>
          <li><a class="icon icon-inline" href="wishlist.html"><i class="fas fa-heart"></i><sup>{{wishCount}}</sup></a></li>
          <li><a class="icon icon-inline" href="cartlist.html"><i class="fas fa-shopping-cart"></i><sup>{{cartCount}}</sup></a></li>
         </ul>
       </div>
      </div>
     </div>
     <div class="row">
      <div class="col-lg-12">
       <div class="navbar-slide">
        <div class="navbar-content">
         <div class="navbar-slide-cross"> 
          <a class="icon icon-inline cross-btn" href="#"><i class="fas fa-times"></i></a>
         </div>
         <div class="navbar-slide-logo"> 
          <a href="#"><img src="../assets/images/logo/01.png" alt="logo" /></a>
         </div>
         <form class="search-form mb-4 navbar-slide-src"> 
          <input type="text" placeholder="搜索任何内容..." /> 
          <button class="btn btn-inline"> <i class="fas fa-search"></i> <span>搜索</span> </button>
         </form>
         <ul class="navbar-list">
          <li class="navbar-item active"><a class="navbar-link" href="../index.html">家</a></li>
          
          <li class="navbar-item navbar-dropdown"> <a class="navbar-link dropdown-indicator" href="#"> <span>店</span> <i class="fas fa-chevron-down"></i> </a>
           <ul class="dropdown-list">
            <li><a class="dropdown-link" href="shop-rightbar.html">使用右栏购物</a></li>
           </ul></li>
          <li class="navbar-item navbar-dropdown"> <a class="navbar-link dropdown-indicator" href="#"> <span>页面</span> <i class="fas fa-chevron-down"></i> </a>
           <ul class="dropdown-list">
            <li><a class="dropdown-link" href="cartlist.html">购物清单</a></li>
            <li><a class="dropdown-link" href="wishlist.html">心愿单</a></li>
            
            <li><a class="dropdown-link" href="login.html">注销</a></li>
           </ul></li>
          <li class="navbar-item navbar-dropdown"> <a class="navbar-link dropdown-indicator" href="#"> <span>博客</span> <i class="fas fa-chevron-down"></i> </a>
           <ul class="dropdown-list">
            <li><a class="dropdown-link" href="blog-list.html">博客列表</a></li>
           </ul></li>
           <li class="navbar-item"><a class="navbar-link" href="account.html">账户</a></li>
           <li class="navbar-item"><a class="navbar-link" href="contact.html">联系我们</a></li>
         </ul>
        </div>
       </div>
      </div>
     </div>
    </div> 
   </nav>
  <div class="btmbar-part">
   <ul class="btmbar-widget">
    <li> <a href="../home-1.html"> <i class="fas fa-home"></i> <span>Home</span> </a></li>
    <li> <a href="wishlist.html" class="wish-icon"> <i class="fas fa-heart"></i> <span>Wishlist</span> <sup>0</sup> </a></li>
    <li> <a href="cartlist.html" class="cart-icon"> <i class="fas fa-shopping-basket"></i> <span>Cart</span> <sup>0</sup> </a></li>
    <li> <a href="account.html"> <i class="fas fa-cog"></i> <span>Settings</span> </a></li>
   </ul>
  </div> 
  <section class="single-banner">
   <div class="container">
    <div class="row">
     <div class="col-lg-12">
      <div class="single-content">
       <h2>购物清单</h2>
       <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="../home-1.html">家</a></li>
        <li class="breadcrumb-item"><a href="shop-leftbar.html">店</a></li>
        <li class="breadcrumb-item"><a href="product-details.html">产品</a></li>
        <li class="breadcrumb-item active" aria-current="page">购物清单</li>
       </ol>
      </div>
     </div>
    </div>
   </div> 
  </section> 
  <section class="cart-part">
   <div class="container">
    <div class="row">
     <div class="col-lg-12">
      <div class="cart-list">
       <table class="table-list">
        <thead>
         <tr>
          <th scope="col">#</th>
          <th scope="col">产品</th>
          <th scope="col">名字</th>
          <th scope="col">价格</th>
          <th scope="col">数量</th>
          <th scope="col">总价</th>
          <th scope="col">操作</th>
         </tr>
        </thead>
        <tbody>
         <tr v-for="(item,index) in carts">
          <td class="table-number"><input type="checkbox" v-model="item.checked"></td>
          <td class="table-product"><img :src=`../../../upload/${item.pic}` alt="item.pname" /></td>
          <td class="table-name"><h5>{{item.pname}}</h5></td>
          <td class="table-price"><h5>${{item.outprice}}</h5></td>
          <td class="table-quantity">
            <a href="javascript:void(0)" @click="changeNum(item,-1)" class="minus fl">-</a>
            <input type="text" v-model="item.cartnum"  class="num_show fl">
            <a href="javascript:void(0)" @click="changeNum(item,1)"  class="add fl">+</a></td>
          <td class="table-total"><h5>${{(item.outprice * item.cartnum).toFixed(2)}}</h5></td>
          <td class="table-action"><button @click="deleteCart(item)"><i class="fas fa-trash-alt"></i></button></td>
         </tr>
        </tbody>
       </table>
      </div>
     </div>
    </div>
    <div class="row">
     <div class="col-md-6 col-lg-6">
      <div class="cart-back"> 
      <li id="none" class="table-number">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" v-model="allChecked" @click="changeAllChecked"><span>全选</span></li>
      </div>
     </div>
     <div class="col-md-6 col-lg-6">
      <div class="cart-cupon">
       <div>
        <template> 
          <select v-model="Coupons">
          <option value="-1">不使用</option>  
          <option  
          v-for="item in discountcard"  
          :key="item.did"  
          :value="item.did">  
      {{ item.discount == 0.95 ? '九五折优惠卷' :  
              item.discount == 0.9  ? '九折优惠卷' :  
              item.discount == 0.85 ? '八五折优惠卷' :  
              item.discount == 0.8  ? '八折优惠卷' :  
              item.discount == 0.75 ? '七五折优惠卷' :  
              item.discount == 0.7  ? '七折优惠卷' : '' }}  
    </option>
        </select>
      </template> 
        <button class="btn btn-inline" @click="tochou"><i class="fas fa-cut"></i><span>优惠卷抽奖</span></button>
       </div>
      </div>
     </div>
    </div>
    <div class="row">
     <div class="col-lg-12">
      <div class="cart-totals">
       <h2 class="title">购物车总数</h2>
       <ul>
        <li> <span>运费</span> <span>$10.00</span></li>
        <li> <span>商品总数</span> <span>{{nums}}</span></li>
        <li> <span>合计</span> <span>${{parseFloat(totalPrice) != 0 ? (parseFloat(totalPrice) + 10).toFixed(2) : '0.00' }}</span></li>
       </ul>
      </div>
      <div class="cart-proceed"> 
       <a href="javascript:void(0);" class="btn btn-inline" @click="toPay"> <i class="fas fa-check"></i> <span>继续结账</span> </a>
      </div>
     </div>
    </div>
   </div> 
  </section> 
  <section class="news-part">
   <div class="container">
    <div class="row">
     <div class="col-md-5 col-lg-6">
      <div class="news-content">
       <h2>Subscribe for Latest Offers</h2>
      </div>
     </div>
     <div class="col-md-7 col-lg-6">
      <form class="search-form news-form"> 
       <input type="text" placeholder="Enter Email Address" /> 
       <button class="btn btn-inline"> <i class="fas fa-envelope"></i> <span>Subscribe</span> </button>
      </form>
     </div>
    </div>
   </div> 
  </section> 
  <footer class="footer-part">
   <div class="container">
    <div class="row">
     <div class="col-md-6 col-lg-4">
      <div class="footer-content"> 
       <a href="#"><img src="../assets/images/logo/01.png" alt="logo" /></a>
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur repudiandae quisquam adipisci asperiores, ipsum ipsa repellat assumenda dolor perspiciatis.</p>
       <ul class="footer-icon">
        <li><a class="icon icon-inline" href="#"><i class="fab fa-facebook-f"></i></a></li>
        <li><a class="icon icon-inline" href="#"><i class="fab fa-twitter"></i></a></li>
        <li><a class="icon icon-inline" href="#"><i class="fab fa-linkedin-in"></i></a></li>
        <li><a class="icon icon-inline" href="#"><i class="fab fa-instagram"></i></a></li>
        <li><a class="icon icon-inline" href="#"><i class="fab fa-pinterest-p"></i></a></li>
       </ul>
      </div>
     </div>
     <div class="col-md-6 col-lg-4">
      <div class="footer-content">
       <h3 class="title">Useful Links</h3>
       <div class="footer-widget">
        <ul>
         <li><a href="#">My Account</a></li>
         <li><a href="#">Order History</a></li>
         <li><a href="#">Order Tracking</a></li>
         <li><a href="#">Best Seller</a></li>
         <li><a href="#">New Arrivals</a></li>
        </ul>
        <ul>
         <li><a href="#">Location</a></li>
         <li><a href="#">Affiliates</a></li>
         <li><a href="#">Contact</a></li>
         <li><a href="#">Carrer</a></li>
         <li><a href="#">Faq</a></li>
        </ul>
       </div>
      </div>
     </div>
     <div class="col-md-12 col-lg-4">
      <div class="footer-content">
       <h3 class="title">Download the App</h3>
       <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit dicta amet tenetur soluta blanditiis at optio molestias facilis praesentium eos! Sed placeat a labore corporis aliquam reiciendis eaque quisquam corrupti.</p>
      </div>
      <ul class="download-app">
       <li><a href="#"><img src="../assets/images/logo/google.png" alt="google" /></a></li>
       <li><a href="#"><img src="../assets/images/logo/app.png" alt="app" /></a></li>
      </ul>
     </div>
    </div>
   </div> 
  </footer>
  <div class="footer-bottom">
   <div class="container">
    <p>Copyright &copy; 2020 | All rights reserved by <a target="_blank" href="https://themeforest.net/user/mironcoder">Mironcoder</a></p>
    <ul class="pay-card">
     <li><a href="#"><img src="../assets/images/pay-card/01.jpg" alt="payment-1" /></a></li>
     <li><a href="#"><img src="../assets/images/pay-card/02.jpg" alt="payment-2" /></a></li>
     <li><a href="#"><img src="../assets/images/pay-card/03.jpg" alt="payment-3" /></a></li>
     <li><a href="#"><img src="../assets/images/pay-card/04.jpg" alt="payment-4" /></a></li>
    </ul>
   </div>
  </div>
</div>
  <script src="../js/vue.js"></script>
  <script src="../js/axios.js"></script>
  <script src="../js/qs.js"></script>   
  <script src="../assets/source/js/vendor/jquery-1.12.4.min.js"></script> 
  <script src="../assets/source/js/vendor/popper.min.js"></script> 
  <script src="../assets/source/js/vendor/bootstrap.min.js"></script> 
  <script src="../assets/source/js/custom/main.js"></script>
  <script>
    let app = new Vue({
      el: '#app',
      data: {
        adminEmail:'',
        adminTel:'',
        uid:'',
        userInfo:{},//用户信息
        cartCount:0,//购物车数量
        wishCount:0,//心愿单数量///
        types:[],//类别信息
        carts:[],
        allChecked:true,
        Coupons:-1,//优惠券id -1
        discountcard:[],//优惠卷数组
      },
      methods:{
        findAdminInfo(){//查询管理员信息
            axios.get("../userController/findAdminInfo").then(resp=>{
              localStorage.setItem("adminEmail",resp.data.email);
              localStorage.setItem("adminTel",resp.data.tel);
              this.adminEmail = resp.data.email;
              this.adminTel = resp.data.tel;
              
            });
          },
          findUserInfo(){//查询用户信息
            let uid = localStorage.getItem("uid");
              if(uid == null || uid == ""){
                alert("请先登录");
                  location.href="login.html";
					        return;
                
				    }else{
              this.uid = localStorage.getItem("uid");
            }
            axios.get("../userController/findUserInfo").then(resp=>{
                if(resp.data == -1){
                  alert("请先登录");
                  location.href = "login.html";
                  return;
                }else{
                  this.userInfo = resp.data;
                  console.log(resp.data);
                }
              });  
          },
          findTypes(){
            axios.get("../typeController/findTypes").then(resp=>{
              this.types = resp.data;
            });
          },
          getCartCount(){//得到购物车数量
            if(this.userInfo == null){
              return;
            }
            let count = localStorage.getItem("cartCount");
            if(count == null || count == ""){
              axios.get("../carInfoController/getCartCount",{
                params:{
                  uid:this.uid
                }
                }).then(resp=>{
                this.cartCount = resp.data;
                console.log(this.cartCount);
                //存值
                localStorage.setItem("cartCount",this.cartCount);
              });
            }else{
              this.cartCount = count;
            }		
			    },
          getWishCount(){//得到心愿单数量
            if(this.userInfo == null){
              return;
            }
            let count = localStorage.getItem("wishCount");
            if(count == null || count == ""){
              axios.get("../wishController/getWishCount",{
                params:{
                  uid:this.uid
                }
                }).then(resp=>{
                this.wishCount = resp.data;
                //存值
                localStorage.setItem("wishCount",this.wishCount);
              });
            }else{
              this.wishCount = count;
            }		
			    },
          getCartsByUid(){//得到购物车信息
            if(this.userInfo == null){
              return;
            }
            axios.get("../carInfoController/getCartsByUid",{
              params:{
                uid:this.uid
              }
            }).then(resp=>{
              if (!Array.isArray(resp.data)) {  
                  //console.error('this.carts 不是一个数组');
                  this.carts = [];

                  return;  
              } 
              this.carts = resp.data;
              console.log(this.carts);
            });
          },
          changeAllChecked(){
                this.carts.forEach(item=>{
                    item.checked = !this.allChecked;
                });
          },
          changeNum(obj, val){
                let temp = parseInt(obj.cartnum) + parseInt(val);
                if(temp <= 0) return;
                axios.post("../carInfoController/changeNum",qs.stringify({
                    cid:obj.cid,
                    cartnum:temp,
                    inventory:obj.inventory
                })).then(resp=>{
                  if(resp.data <= 0){
                    return alert("修改失败");
                  }else{
                    obj.cartnum = temp;
                  }    
                });
          },
          deleteCart(obj){
                axios.post("../carInfoController/deleteCart",qs.stringify({
                    cid:obj.cid
                })).then(resp=>{
                    if(resp.data <= 0) return alert("删除失败");
                    this.getCartsByUid();
                    //改一下购物车数量
					          localStorage.setItem("cartCount",parseInt(this.cartCount)-1);
                    this.getCartCount();
                });
          },
          toPay(){
                if (!Array.isArray(this.carts)) {  
                  console.error('this.carts 不是一个数组');  
                  return;  
                 } 
                let arr = [];
                this.carts.forEach(item=>{
                    if(item.checked){
                        arr.push(item.cid);
                    }
                });
                if(this.Coupons == ''){
                  arr.push(-1);
                }else{
                  arr.push(this.Coupons);
                }
                if(arr.length < 2){
                  alert("没有选购商品");
                  return;
                }else{
                  location.href = "checkout.html?" + arr.join(",");
                }
                //选中的cid在购物车里清除加入订单表未付款状态
                // axios.get("../orderController/addOrder",{
                //   params:{
                //     /////////////////////////////////////TODO:
                //   }
                // }).then(resp=>{

                // });
          },
          tochou(){
            location.href = "./chou.html";
          },
          findDiscountcard(){
            axios.get("../discountcardController/findDiscountcard").then(resp=>{
              this.discountcard = resp.data;
              console.log(this.discountcard);
            });
          }
      },
      computed:{
            totalPrice(){
                let temp = 0;
                this.carts.forEach(item=>{
                    if(item.checked){
                        temp += item.outprice * item.cartnum;
                    }
                });
                return temp.toFixed(2);
            },
            nums(){
                let temp = 0;
                this.carts.forEach(item=>{
                    if(item.checked){
                        temp += parseInt(item.cartnum);
                    }
                });
                return temp;
            }
        },
      created(){
        this.findAdminInfo();
        this.findUserInfo();
        this.findTypes();
        this.getCartCount();
        this.getWishCount();
        this.getCartsByUid();
        this.findDiscountcard();
      }
    });
  </script> 
 </body>
</html>